<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    内部的box垂直方向的距离由margin决定。属于同一个bfc的两个相邻box的margin会发生重叠
    -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 300px;
            height: 300px;
            background: deeppink;
            margin: 50px;
        }
        #inner {
            width: 150px;
            height: 150px;
            background: pink;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="inner">

        </div>
    </div>
</body>
</html>
